<template>
  <div class="from">
    <div class="input" v-if="!istextarea">
      <div class="name">{{name}}</div>
      <input :type="type" :placeholder="placeholder" :value="value" @input="$emit('input',$event.target.value)">
      <i :class="icon" class="icon"></i>
    </div>
    <div class="input" v-if="istextarea">
      <div class="name">{{name}}</div>
      <textarea class="textarea" :type="type" :placeholder="placeholder" :value="value" @input="$emit('input',$event.target.value)"></textarea>
      <i :class="icon" class="icon"></i>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: "text"
    },
    name: String,
    placeholder: String,
    sale: Boolean,
    icon: String,
    value: String,
    istextarea: Boolean
  },
  name: 'Form',
  data () {
    return {
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  },
}
</script>
<style  scoped>
.from {
  padding: 0.2rem 0.1rem;
}
.input {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  text-align: right;
}
input,textarea {
  margin-left: 0.3rem;
  flex: 7;
  width: 100%;
  height: 1rem;
  outline: none;
  border: none;
  border-bottom: 0.05rem #ccc solid;
  background-color: #fff;
  color: rgb(51, 50, 50);
}
.name {
  flex: 1.5;
  font-weight: bold;
}
.male {
  display: flex;
  margin-left: 2rem;
  margin-top: 0.2rem;
}
.male div {
  border: 0.05rem #ccc solid;
  padding: 0.08rem 0.3rem;
  color: rgb(92, 90, 90);
  border-radius: 0.1rem;
  margin-right: 0.2rem;
}
.icon {
  position: absolute;
  right: 0.2rem;
}
.textarea{
  padding-top: .1rem!important;
  padding: 0 .6rem 0 0;
}
</style>
